<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/vue2.4.0.js"></script>
		<script src="js/main.js"></script>
		<script src="js/jq-parm.js"></script>
		<style>
			@media (min-width: 992px) {
				.my-foot span {
					font-size:28px;
					
				}
				#myscroll{
					height: 300px;
				}
			}
			@media (max-width: 400px) {
				.dropdown-menu{
					left: -100px;
				}
				#myscroll{
					height: 150px;
				}
			}
		</style>
	</head>
	<body style="background-color:">
		<div id="app">
		<div class="container" style="margin-top: 20px;">
			<div class="row" style="font-size: 50px;text-align: center;margin: 0 0 0 0;">
				<div class="col-xs-8 col-lg-10">
					<form>
						<input type="text" class="form-control" placeholder="输入资源关键字" style="float: left;height: 50px;"/>
					</form>
				</div>
				<div class="col-xs-2 col-lg-1" style="float: right;">
					<div class="dropdown">
						<span style="color:black;" class="dropdown-toggle glyphicon glyphicon-plus-sign" id="dropdownMenu1" 
							  data-toggle="dropdown"></span>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
							<li role="presentation" >
								<a role="menuitem" tabindex="-1" href="#" onclick="parent.location.href='fileManage.html?pageType=1'">文件上传与下载</a>
								<a role="menuitem" tabindex="-1" href="#">新建文件夹</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-xs-2 col-lg-1" style="float: right;">
					<div class="dropdown">
						<span style="color:black;" class="dropdown-toggle glyphicon glyphicon-info-sign" id="dropdownMenu2" 
							  data-toggle="dropdown">
						</span>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
							<li role="presentation" class="dropdown-header">皮肤</li>
							<li role="presentation" >
								<a role="menuitem" tabindex="-1" href="#">黑</a>
							</li>
							<li role="presentation">
								<a role="menuitem" tabindex="-1" href="#">白</a>
							</li>
							<!-- <li role="presentation">
								<a role="menuitem" tabindex="-1" href="#">
									数据通信/网络
								</a>
							</li> -->
							<!--<li role="presentation" class="divider"></li>
							<li role="presentation" class="dropdown-header">字体</li>
							<li role="presentation">
								<a role="menuitem" tabindex="-1" href="#">小</a>
							</li>
							<li role="presentation">
								<a role="menuitem" tabindex="-1" href="#">中</a>
							</li>
							<li role="presentation">
								<a role="menuitem" tabindex="-1" href="#">大</a>
							</li>-->
						</ul>
					</div>
				</div>
			</div>
			
			
			
			<div class="row" style="text-align: center;margin: 0 0 0 0;">
		    	<div class="row">
		    		<div class="col-lg-2 col-xs-4">
		    			<div class="thumbnail">
				            <img src="images/love.jpg"
				                 alt="通用的占位符缩略图">
		        		</div>
		    		</div>
		    		<div class="col-lg-2 col-xs-4">
		    			<div class="thumbnail">
				            <img src="images/play.jpg"
				                 alt="通用的占位符缩略图">
		        		</div>
		    		</div>
		    		<div class="col-lg-2 col-xs-4">
		    			<div class="thumbnail">
				            <img src="images/wirrte.jpg"
				                 alt="通用的占位符缩略图">
		        		</div>
		    		</div>
		    		<div class="col-lg-2 col-xs-4">
		    			<div class="thumbnail">
				            <img src="images/book.jpg"
				                 alt="通用的占位符缩略图">
		        		</div>
		    		</div>
		    		<div class="col-lg-2 col-xs-4">
		    			<div class="thumbnail">
				            <img src="images/music.jpg"
				                 alt="通用的占位符缩略图">
		        		</div>
		    		</div>
		    		<div class="col-lg-2 col-xs-4">
		    			<div class="thumbnail">
				            <img src="images/some.jpg"
				                 alt="通用的占位符缩略图">
		        		</div>
		    		</div>
		    	</div>
			</div>
			
			
			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="panel-title">
						最近
					</h3>
				</div>
				<div class="panel-body">
					<div class="table-responsive">
					  <table class="table table-hover" style="margin-bottom: 0;">
					    <thead>
					      <tr>
					        <th width="70%">文件</th>
					        <th width="10%" class="text-center">操作方式</th>
					        <th class="text-center">时间</th></tr>
					    </thead>
					  </table>
					</div>
					<div id="myscroll" data-spy="scroll" data-target="#navbar-example" data-offset="0"
     style="overflow:auto; position: relative;">
					<div class="table-responsive">
					  <table class="table table-hover" >
					      	<tr v-for="(item,i) in search()" :key="item.id">
								<td width="70%" v-html="item.name"></td>
								<td width="10%" class="text-center" v-html="item.do"></td>
								<td class="text-center" v-html="item.time"></td>
							</tr>
					      	<tr v-if="mod==0">
					        	<td class="text-center" colspan="3"><a href="#" @click="mod=mod==0?1:0">展开更多</a>
					        	</td>
					      	</tr>
					      	<tr v-if="mod==1">
					        	<td class="text-center" colspan="3"><a href="#" @click="mod=mod==0?1:0">收起部分</a>
					        	</td>
					      	</tr>
					  </table>
					</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		
		<nav class="navbar navbar-default navbar-fixed-bottom" style="background-color: rgba(255,255,255,0.1);border: none;">
			<iframe src="user_public.html" name="menuFrame" id="menuFrame" onload="reinitIframe()" style="overflow:visible;"
			   	scrolling="no" height="100%" width="100%" frameborder="0">
			</iframe>
		</nav>
		<script>
			//ifame 高度因内容自适应
		    window.onresize = function () {
		            reinitIframe();
		        }
		        function reinitIframe(){
		            var iframe = document.getElementById("menuFrame");
		            try{
		                var bHeight = iframe.contentWindow.document.body.scrollHeight;
		                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
		                var height = Math.min(bHeight, dHeight);
		                iframe.height = height;
		                // console.log(iframe.height);
		            }catch (ex){}
		        }
		        // 定时触发
		        window.setInterval("reinitIframe()", 200);
			var childFrameObj = document.getElementById('menuFrame');
			    childFrameObj.contentWindow.paramFromParent = $.get('pageType') || 0;
				console.log($.get('pageType'))
		</script>
	</body>
</html>
<script>
	var vm = new Vue({
		el:"#app",
		data:{
			mod:0,
			list:[
					{id:1,name:'恢复鬼画符鬼画符绘画风格合法化合法化',do:'<span class=\"glyphicon glyphicon-link\"></span>',time:getMyDate(new Date())},
					{id:2,name:'2',do:'<span class=\"glyphicon glyphicon-link\"></span>',time:getMyDate(new Date())},
					{id:3,name:'3',do:'<span class=\"glyphicon glyphicon-link\"></span>',time:getMyDate(new Date())},
					{id:4,name:'4',do:'<span class=\"glyphicon glyphicon-link\"></span>',time:getMyDate(new Date())},
					{id:5,name:'5',do:'<span class=\"glyphicon glyphicon-link\"></span>',time:getMyDate(new Date())},
					{id:6,name:'6',do:'<span class=\"glyphicon glyphicon-link\"></span>',time:getMyDate(new Date())},
					{id:7,name:'7',do:'<span class=\"glyphicon glyphicon-link\"></span>',time:getMyDate(new Date())},
					{id:8,name:'8',do:'<span class=\"glyphicon glyphicon-link\"></span>',time:getMyDate(new Date())},
					{id:9,name:'9',do:'<span class=\"glyphicon glyphicon-link\"></span>',time:getMyDate(new Date())},
					{id:10,name:'10',do:'<span class=\"glyphicon glyphicon-link\"></span>',time:getMyDate(new Date())}
				]
		},
		methods:{
			search: function(){
				if(this.mod == 0){
					return this.list.slice(0,5);
				}
				return this.list;
			}
			
		}
	});
	
	
	
	//补0操作,当时间数据小于10的时候，给该数据前面加一个0  
    function getzf(num){  
        if(parseInt(num) < 10){  
            num = '0'+num;  
        }  
        return num;  
    }
	//将时间戳格式化 
	function getMyDate(time){  
    if(typeof(time)=="undefined"){
        return "";
    }
    var oDate = new Date(time),  
     oYear = oDate.getFullYear(),  
     oMonth = oDate.getMonth()+1,  
     oDay = oDate.getDate(),  
     oHour = oDate.getHours(),  
     oMin = oDate.getMinutes(),  
     oSen = oDate.getSeconds(),  
     oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间  
            
     return oTime;  
    };
    
</script>
